<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <img src="img/off.gif" id="light">
  <br />
  <input type="button" id="on" value="点亮" >
  <input type="button" id="off" value="关闭" >
  <br />
  <input type="text" id="inputTxt"  value="ITCAST">
  <br />

  <input type="checkbox" name="hobby" />电影
  <input type="checkbox" name="hobby" />旅游
  <input type="checkbox" name="hobby" />游戏
  <br/>
  <input type="button" value="全选" id = "choose"/>
  <input type="button" value="反选" id= "unChoose"/>


</body>
<script>
  //关闭灯
  var img = document.getElementById("light");
  var bt_on = document.getElementById("on").onclick = function () {

    img.src = "img/on.gif";

  };
  document.getElementById("off").onclick = function () {
    img.src = "img/off.gif"

  };

  var obj = document.getElementById("inputTxt");
  obj.onfocus = ()=>{
    obj.value = obj.value.toLowerCase();
  }
  obj.onblur = ()=>{
    obj.value = obj.value.toUpperCase();
  }

  // function loweStr() {
  //   var element = document.getElementById("inputTxt");
  //   element.value = element.value.toLowerCase();

  // }
 

  // function onfocus() {
  //   // 失去焦点内容变成大写
  //   var element = document.getElementById("inputTxt");
  //   element.value = element.value.toUpperCase();

  // }
   
  var arrHobby = document.getElementsByName("hobby");



  //全选
 document.getElementById("choose").onclick = function(){
   for(var i = 0 ; i <arrHobby.length; i++){
          if(arrHobby[i].checked ==false){
            arrHobby[i].checked =true;
          }else{
            arrHobby[i].checked =false;
          }

   }
      
 };
 
   //反选
   document.getElementById("unChoose").onclick = function(){
   for(var i = 0 ; i <arrHobby.length; i++){
          if(arrHobby[i].checked ==true){
            arrHobby[i].checked =false;
          }else{
            arrHobby[i].checked =true;
          }

   }
      
 };


</script>





</html>